﻿<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<title>Rain CSS > Mobile</title>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<style type="text/css">
.sliderbtn{top:50%;margin: -11px 0 0 -10px;left:0;}
/* 密码明文显示开关*/
.switchWrap{ width:64px; height:30px; border-radius:30px; background: #eee;overflow: hidden; 
user-select:none; box-shadow:0px 1px 1px #c3c3c3 inset, 0 0 1px #e4e4e4; cursor: pointer;}
.switch{width:100px;height: 25px; margin: 2px 0;margin-left:-30px; transition: margin-left .1s ease; }
.switch-on{margin-left:0;}
.switch .switchcyc{width:25px; height:25px; display:inline-block; border-radius:100%; background-color: #fff; vertical-align: middle;
box-shadow:0px 1px 1px #dadada inset, 0 1px 1px rgba(0,0,0, .5);
}
.switch span{height:25px; line-height:25px; display:inline-block; vertical-align: middle; color:#999; font-size: 12px;}
.switch span.letter{ padding:0 5px 0 7px;} 
.switch span.dot{ padding:0 0 0 4px; font-size: 10px;}

.star{width: 16px;height: 15px; margin: 3px 5px 0 0;background: url(images/comment_ico.png) no-repeat -17px 0; vertical-align: middle;}
.stared{width: 16px;height: 15px; margin: 3px 5px 0 0;background: url(images/comment_ico.png) no-repeat 0 0; vertical-align: middle;}
.starwraps .star{width: 12px;height: 12px; margin: 0 5px 0 0; background: url(images/comment_ico.png) no-repeat -20px -21px; vertical-align: middle;}
.starwraps .stared{width: 12px;height: 12px; margin: 0 5px 0 0; background: url(images/comment_ico.png) no-repeat 0 -21px; vertical-align: middle;}
/* 翻卡片效果 */
.scrollnumbox{margin:5px;}
.numwrap{ width: 37px; height:52px; margin-right:2px; position:relative; float:left; background: #000; border-radius:3px; box-shadow: 0px -1px 3px rgba(141, 172, 200, 0.25) inset; text-align:center; font-size: 40px; line-height:52px; color:#fff;}
.numwrap .numbox{position:absolute; top:0; width: 37px; height:26px; background: #000; overflow:hidden; border-radius:3px; text-align:center; font-size: 40px; line-height:52px; color:#fff;}
.numwrap .numboxdown{position:absolute; bottom:0; width: 37px; height:26px; background: #000; overflow:hidden; border-radius:3px; text-align:center; font-size: 40px;
 line-height:52px; color:#fff; z-index: 9998;}
.numwrap .numboxdown .numdiv{position:absolute; bottom:0; width: 37px;}
.numwrap:last-child{margin-right: 0;}
.numwrap span.lines{display: block; height: 10px; top: 20px;left: 2px; width:31px; border-left: 1px solid rgba(108,126,172,0.5);border-right: 1px solid rgba(108,126,172,0.5); 
 position: absolute;z-index: 9999;}
.numwrap span.lines hr{height: 0px; border:none; background:none; border-bottom: 1px solid rgba(0,0,0,0.2); margin: 5px 0;}
.numboxdown{
  animation: animationFrames linear 0.5s;
  animation-iteration-count: 1;
  transform-origin: 0% 0%;
  -webkit-animation: animationFrames linear 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 0% 0%;
}
@keyframes animationFrames{
  0% { transform: rotateX(180deg);  }
  100% {  transform: rotateX(0deg);}
} 

@-webkit-keyframes animationFrames {
  0% {  transform: rotateX(180deg); }
  100% {  transform: rotateX(0deg); }	
}
</style>
</head>
<body class="body">

	<div class="headerBlue">
		<nav class="lsn posr clearfix">
			<a href="http://www.webdevelopmentmachine.com" target='_blank' class="headerLink headerLinkBlue tac fl l ib wf-33 tdn">首页home</a>
			<a href="http://www.webdevelopmentmachine.com/blog" target='_blank' class="headerLink headerLinkBlue tac fl l ib wf-33 tdn">博客blog</a>
			<a href="http://www.webdevelopmentmachine.com/demo/game.html" target='_blank' class="headerLink headerLinkBlue tac fl l ib wf-33 tdn">游戏game</a>
		</nav>
	</div>
	<div class="headerM headerGrey">
		<div class="container posr">
			<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
		</div>
	</div>
  <div class="c_touch2 mainads">
                   <div class="c_touhmain posr oh">
                     <ul class=" lsn c_touhlist posa nom nop w-mx clearfix">
                       <li class="fl l posr" style="background:url(http://ww3.sinaimg.cn/large/005vSBqyjw1elpmz3aub7j31hc0u0qrl.jpg) no-repeat 0 0;"> 
                         <div class="container fullh">
                              <div class="mainadsbox1 w-30 fullh white" style="background:rgba(0, 0 ,0 ,0.5);">
                                <fieldset class="">
                                  <legend style="font-size:36px; line-height:36px;">大背景滚动</legend> 
                                </fieldset> 
                              </div>
                         </div>
                       </li> 
                       <li class="fl l posr" style="background:url(http://ww3.sinaimg.cn/large/005vSBqyjw1elpmz3aub7j31hc0u0qrl.jpg) no-repeat 0 0;"> 
                         <div class="container fullh">
                              <div class="mainadsbox1 w-30 fullh white" style="background:rgba(0, 0 ,0 ,0.5);">
                                <fieldset class="">
                                  <legend style="font-size:36px; line-height:36px;">大背景滚动</legend> 
                                </fieldset> 
                              </div>
                         </div>
                       </li> 
                     </ul>
                     <ul class="c_touchicon lsn clearfix posa nom nop tipCir">
                       <li class="fl l posr c_tips mls "> <i class="c_on tipicon w-1 h-1  block so bgw"></i>
                       </li>
                       <li class="fl l posr c_tips mls "> <i class="c_on  tipicon w-1 h-1 block so bgw"></i>
                       </li>
                     </ul>
                   </div>
</div>

	<div class="container mt"> 
    <div class="content">
		<div class="sidebar l posr">
			<h2 class="category">基本组件 Basic component</h2>
			<p>基本组件可以用来构建网页基本功能元素 Basic component are the instance can use build basic functionalities</p>
		</div>

		<div class="main mainRight posr">
			<h1>基本组件 Basic component</h1>
			<fieldset>
				<legend>基本加载效果 Basic loader</legend>
				<div class="hs rounds ggrey bgrey_2 btn greybtn ib ps loader-show">show</div>
				<div class="hs rounds ggrey bgrey_2 btn greybtn ib ps ml loader-hide">hide</div>
			</fieldset>
			<fieldset id="slider">
				<legend>滑动条 Basic slider</legend>
				<div class="ui-slider">
					<input type="number" data-type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" class="" />
					<div role="application" class="j_sliderbar bglgrey2 rounds b so fullw h-1 posr ov">
						<div class="j_sliderbg1 fullh posa"></div>
						<div class="j_sliderbg2 fullh posa o-9"></div>
						<span class="j_sliderbtn1 sliderbtn ib w-2 h-2 bgw b rounds posa" role="slider"></span>
					</div>
				</div>
			</fieldset>
			<fieldset id="rollcard">
				<legend>滚动卡片 Roll card</legend>
				<div class="scrollnumbox clearfix">
					<div class="numwrap"><span class="lines"><hr /></span>0
						<div class="numbox">1</div>
						<div class="numboxdown"><div class="numdiv">1</div></div>
					</div>
				</div>
			</fieldset>
			<fieldset id="starlevel">
				<legend>评论星级 Star</legend>
				<div id="starbox" class="starwrap h-2 ">
					<span class="j_star ib"></span><span class="j_star ib"></span><span class="j_star ib"></span><span class="j_star ib"></span><span class="j_star ib"></span>
				</div>
				<div id="starbox2" class="starwraps h-2 ">
					<span class="j_star ib"></span><span class="j_star ib"></span><span class="j_star ib"></span><span class="j_star ib"></span><span class="j_star ib"></span>
				</div>
			</fieldset>
			
	      <fieldset id="Messages">
	    	<legend>消息框  Messages</legend>
	        <div class="rounds css3_gradient_green button greenButton p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p class="bottom">Styles for success, warning, and error messages or alerts</p>
	        </div>
	        <br />
	        <div class="rounds css3_gradient_yellow button yellowButton p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p class="bottom">Styles for success, warning, and error messages or alerts</p>
	        </div>
	        <br />
	        <div class="rounds css3_gradient_blue button blueButton p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p class="bottom">Styles for success, warning, and error messages or alerts</p>
	        </div>
	        <br />
	        <div class="rounds css3_gradient_red button redButton p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p class="bottom">Styles for success, warning, and error messages or alerts</p>
	        </div>
	        
	        <br />
	        <div class="rounds lightYellowBox p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p>Styles for success, warning, and error messages or alerts</p>
	          <p class="tal bottom">
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action one"/>  
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action two"/>      
	          </p>
	        </div>
	        <br />
	        <div class="rounds lightRedBox p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p>Styles for success, warning, and error messages or alerts</p>
	          <p class="tal bottom">
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action one"/>  
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action two"/>      
	          </p>
	        </div>
	        <br />
	        <div class="rounds lightGreenBox p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p>Styles for success, warning, and error messages or alerts</p>
	          <p class="tal bottom">
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action one"/>  
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action two"/>      
	          </p>
	        </div>
	        <br />
	        <div class="rounds lightBlueBox p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p>Styles for success, warning, and error messages or alerts</p>
	          <p class="tal bottom">
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action one"/>  
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action two"/>      
	          </p>
	        </div>
	        <br />
	        <div class="rounds lightGreyBox p">
	          <span class="close block r oh tac bord fr">X</span>
	        	<p>Styles for success, warning, and error messages or alerts</p>
	          <p class="tal bottom">
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action one"/>  
				<input type="button" class="heightS rounds ggrey bgrey_2 button greybtn" value="action two"/>      
	          </p>
	        </div>
	      </fieldset>
	      
	     <fieldset id="Labels">
	   	   <legend>标签 Labels</legend>
	       <p>
	       	<span class="bggrey rounds ps white bord vm">Default</span><br /><br />
					<code>&lt;span class="bgGrey rounds ps white bord vm"&gt;Default&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgGreen rounds ps white bord vm">Success</span><br /><br />
					<code>&lt;span class="bgGreen rounds ps white bord vm"&gt;Success&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgYellow rounds ps white bord vm">Warning</span><br /><br />
					<code>&lt;span class="bgYellow rounds ps white bord vm"&gt;Warning&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgRed rounds ps white bord vm">Important</span><br /><br />
					<code>&lt;span class="bgRed rounds ps white bord vm"&gt;Important&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgBlue rounds ps white bord vm">Info</span><br /><br />
					<code>&lt;span class="bgBlue rounds ps white bord vm"&gt;Info&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgBlack rounds ps white bord vm">Inverse</span><br /><br />
					<code>&lt;span class="bgBlack rounds ps white bord vm"&gt;Inverse&lt;/span&gt;</code>
	       </p>
				
	       <p>
	       	<span class="bgLightGrey rounds ps blank bord vm">Default</span><br /><br />
					<code>&lt;span class="bgLightGrey rounds ps blank bord vm"&gt;Default&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgLightGreen rounds ps blank bord vm">Success</span><br /><br />
					<code>&lt;span class="bgLightGreen rounds ps blank bord vm"&gt;Success&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgLightYellow rounds ps blank bord vm">Warning</span><br /><br />
					<code>&lt;span class="bgLightYellow rounds ps blank bord vm"&gt;Warning&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgLightRed rounds ps blank bord vm">Important</span><br /><br />
					<code>&lt;span class="bgLightRed rounds ps blank bord vm"&gt;Important&lt;/span&gt;</code>
	       </p>
	       <p>
	       	<span class="bgLightBlue rounds ps blank bord vm">Info</span><br /><br />
					<code>&lt;span class="bgLightBlue rounds ps blank bord vm"&gt;Info&lt;/span&gt;</code>
	       </p>
	     </fieldset>
	      
			<fieldset id="CheckBox">
				<legend>垂直多选框组 Vertical checkbox group</legend>
				<ul id="j_group_1">
				</ul>
			</fieldset> 

			<fieldset id="collapsibles">
				<legend>基本可折叠组件 Basic collapsibles</legend>
				<div class='c_collaps'>
					<div class="c_colpsTile"></div>
					<div class='c_colpsDet'></div>
				</div>
			</fieldset>
			<fieldset id="swipe">
				<legend>Basic swipe</legend>
				<div class='c_touch'></div>
			</fieldset>
			
	        <fieldset>
	            <legend>slide</legend>
	            <div id="slide" class="slide b oh posr">
	            <div class="slidemain oh mlrauto">
	              <ul class="slidewrap lsn nop nom clearfix">
	                <li class="l fl">
	                    <a class="block ps tac" href="javascript:;"><img class="fullw b round-5" src="images/figure1.jpg" alt="1111"></a>
	                    <span class="ms block tac oh wwn toe">1111</span>
	                    <p>3点32个赞</p>
	                </li>
	                 <li class="l fl">
	                    <a class="block ps tac" href="javascript:;"><img class="fullw b round-5" src="images/figure2.jpg" alt="1111"></a>
	                    <span class="ms block tac oh wwn toe">2222</span>
	                    <p>3点32个赞</p>
	                </li>
	                <li class="l fl">
	                    <a class="block ps tac" href="javascript:;"><img class="fullw b round-5" src="images/figure3.jpg" alt="1111"></a>
	                    <span class="ms block tac oh wwn toe">3333</span>
	                    <p>3点32个赞</p>
	                </li>
	                <li class="l fl">
	                    <a class="block ps tac" href="javascript:;"><img class="fullw b round-5" src="images/figure4.jpg" alt="1111"></a>
	                    <span class="ms block tac oh wwn toe">4444</span>
	                    <p>3点32个赞</p>
	                </li>
	                <li class="l fl">
	                    <a class="block ps tac" href="javascript:;"><img class="fullw b round-5" src="images/figure5.jpg" alt="1111"></a>
	                    <span class="ms block tac oh wwn toe">5555</span>
	                    <p>3点32个赞</p>
	                </li>
	                </ul>
	            </div>
	            <a id="btnLeft" class="black posa b" href="javascript:;"></a>
	            <a id="btnRight" class="black posa b" href="javascript:;"></a>
	            </div>
            </fieldset>
	        <fieldset>
	            <legend>switch</legend>
                <div id="switchbox" class="switchWrap">
                	<div class="j_switch switch"><span class="letter">Abc</span><div class="switchcyc"></div><span class="dot">● ● ●</span></div>
                </div>
            </fieldset>
	        <fieldset>
	            <legend>div scrollable</legend>
                <div id="scrollableBox" class="h-5 oa">
                	<div style="height:300px;background-color:#57A957"></div>
                </div>
                <input id="addScroll" type="button" value="addScroll" />
                <input id="removeScroll" type="button" value="removeScroll" />
            </fieldset>
		</div>
   
    <footer class="footer socialFooter c borderTop">
      <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
      <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>  
    </div>
  </div>
<!-- <script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/fx.js"></script> -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/jquery.slider.js"></script>
<script type="text/javascript" src="js/checkbox.js"></script>
<script type="text/javascript" src="js/jquery.group.js"></script>
<script type="text/javascript" src="js/collapsibles.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript" src="js/star.js"></script>
<script type="text/javascript">
//创建滑动广告头部
var bigswipe = new $.swipe({ 
      touchSelector: ".c_touch2",
      imgArray: [],
      linksArray: [],
      time: 3000,
      autorun: true,
      width: $(window).width()-20,
      height: 551,
      responsive: false,
      tipswrapStyle: {
        bottom: "12px",
        right: "500px"
      }});

//创建loading弹出框效果
var lo = util.loading({loadingClass:'bglg'});
lo.setContent('the content is loading...');
$(".loader-show").on("click",function(){
 lo.show();
});
$(".loader-hide").on("click",function(){
 lo.hide();
});
//创建滑动条
var arr1 = [{name:0,val:0},{name:30,val:4},{name:60,val:8},{name:90,val:11.9},
            {name:100,val:13},{name:150,val:19.1},{name:200,val:25},{name:250,val:30.7},{name:300,val:36.2},{name:350,val:41.4},
            {name:400,val:46.5},{name:500,val:57},{name:600,val:67.1},{name:700,val:76.9},{name:800,val:86.2},{name:900,val:95.2},
            {name:1000,val:103.8},{name:1200,val:124.3},{name:1500,val:152.8},{name:2000,val:200}];
var slider = new $.slider({
    barHandler:".j_sliderbar",
    btnHandler:".j_sliderbtn1",
    outputHandler:"#slider-1",
    bgbarHandler:".j_sliderbg1",
    bgbarStyle:{"background-color":"#ffb17d"},
    bgbarHandler2:".j_sliderbg2",
    bgbarStyle2:{"background-color":"#fc7c26"},
    max:200,
    min:10,
    divs:4,
    data: arr1,
    initValue:121,
    prevValue: 500,
    before: function(){
    	var d = slider.getData();
    	var i = util.binarySearch(d,slider.initValue);
    	slider.setMin((i+1)*10);
    	if(slider.prevValue > slider.initValue){
    		var j = util.binarySearch(d,slider.prevValue);
      		slider.setValue((j+1)*10);
    	}else{
    		slider.setValue((i+1)*10);
    	}
    },
    startCallback: function(){
    	//slider.output.show();
    },
    endCallback: function(){
    	//slider.output.hide();
    }
});
slider.init();

//创建checkbox对象
var box = new $.checkBox({
    callback: function () {
        $("#j_group_1").find(".c_box").on('click', function () {
            var _this = $(this), Ok_icon = _this.find(".icon-ok"), checkedObj = _this.find('.ui-checkbox ');
            Ok_icon.toggleClass("vf").parent().toggleClass("gb");
            if (checkedObj.attr('checked') == undefined) {
                checkedObj.attr('checked', true);
            } else {
                checkedObj.attr('checked', false);
            }
        });
    }
});
//创建group对象
var g = new $.group({
    groupSelector: "#j_group_1",
    align: 'vertical',
    icon: false,
    childObj: [box]
});

//创建可折叠组件
var grop=new $.group({
	groupSelector : ".c_colpsDet",
	align:'vertical',
	icon : true,
	groupClass:'',
	childObj:['botton','text','wrong']
});
var colls=new $.collapsible();

//创建滑动广告头部
var o = new $.swipe({autorun:true});
//创建slide
var slide = new $.slide({
     selector: '#slide',  //滑动的块 
     src: [],
     alt:[],  
     text: [], 
     fix: false,  //是否固定大小
     width: 320, //宽
     height: 195, //高
     images: 1,  //展示图片的格式
     slides: 1,  //每次滑动图片个数
     length: 40, //触屏最小滑动长度
     control: false, //是有控制按钮
     controlwidth:200,
     loop: true, //是否是无缝轮播
     auto: false, //自动轮播
     speed: 800, //滑动速度
     delay: 5000 //滚动间隔
});
//开关切换效果
$("#switchbox").on("click",function(){
	$(".j_switch").toggleClass("switch-on");
	if($(".j_switch").hasClass("switch-on")){
		$("#pwdBox").prop("type","text");
	}else{
		$("#pwdBox").prop("type","password");
	}
})
//iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally
$("#addScroll").on("click",function(){
	util.touch.scrollable("#scrollableBox");
})
$("#removeScroll").on("click",function(){
	util.touch.scrollable("#scrollableBox","off");
})
//评论星级功能
var s = new star({
	boxHandler:"#starbox",
	event:'click',
	value: 2,
	boxClass:"",
	boxStyle:{},
	starClass:"star",
	starStyle:{},
	selectedClass:"stared",
	selectedStyle:{}
});
//评论星级功能
var s = new star({
	boxHandler:"#starbox2",
	event:'click',
	value: 2,
	boxClass:"",
	boxStyle:{},
	starClass:"star",
	starStyle:{},
	selectedClass:"stared",
	selectedStyle:{}
}); 
</script>
</body>
</html>
